<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

    <script>
        $(function(){
            $("#username").blur(function(){

                $.ajax("${pageContext.request.contextPath}/ajax/validateUsername",
                       {
                           type:"POST",
                           data:{"username":$(this).val()},
                           dataType:"text",
                           success:function(message){
                               $("#usernameMessage").text(message);
                           }
                       });

            });


            $("#show").click(function(){

                $.getJSON("${pageContext.request.contextPath}/ajax/getEmp",
                          function(emp){
                              $("#id").text(emp.id);
                              $("#name").text(emp.name);
                              $("#password").text(emp.password);
                              $("#email").text(emp.email);
                              $("#age").text(emp.age);
                              $("#phone").text(emp.phone);
                          });

            });

        });
    </script>
</head>
<body>
    用户名：<input id="username" type="text" name="username"/>
    <span id="usernameMessage"></span>

    <hr/>

    <a id="show" href="javascript:;">显示数据</a>

    <hr/>

    编号：<span id="id"></span><br/>
    姓名：<span id="name"></span><br/>
    密码：<span id="password"></span><br/>
    邮箱：<span id="email"></span><br/>
    年龄：<span id="age"></span><br/>
    电话：<span id="phone"></span><br/>


</body>
</html>
